<template>
	<!-- 关联商品界面 -->

	<view class="search-position">
		<!-- 搜索框 -->
		<view class="search-input">
			<image src="/static/images/search.png" mode="aspectFit"></image>
			<input type="text" :focus="true" v-model="data.searchValue" confirm-type='搜索' @confirm="search">
		</view>
		<view @click="search">搜索</view>
	</view>

	<view class="card-title" v-if="data.goodList.length>0">
		商品列表
	</view>

	<!-- 商品部分 -->
	<view class="related-goods" v-for="(item,index) in data.goodList" :key='index' @click="selectGood(item.goods_title,item._id,item.goods_price,item.video_url,item.isRelated)">
		<!-- 商品封面图 -->
		<view>
			<image :src="item.goods_cover" mode="aspectFill"></image>
		</view>
		<!-- 商品标题和价格 -->
		<view>
			<text class="over-text line-clamp" :style="{color:(item.isRelated ? '#dddddd' : '')}">{{item.goods_title}}</text>
			<!-- 已经关联过就显示灰色 -->
			<text :style="{color:(item.isRelated ? '#dddddd' : '')}">¥{{item.goods_price}}</text>
		</view>
	</view>

	<!-- 没有数据的提示 -->
	<view class="tips" v-if="data.goodList.length === 0">你还没有商品数据</view>

	<!-- 上拉加载的提示 -->
	<view class="loading-height">
		<Loading v-if="loading"></Loading>
	</view>
</template>

<script setup>
	import { ref, onMounted, reactive, toRefs, watch } from 'vue'
	import { init } from '@/public/package-js/init.js'
	import { Upload } from '@/public/package-js/uploadImg.js'
	import { FeedBack } from "@/public/package-js/feedback.js"
	import { onReachBottom, onLoad } from '@dcloudio/uni-app'
	import { related_good } from "@/public/package-js/passValue.js"

	const data = reactive({
		goodList: [], // 存储商品
		pageNum: 0, // 请求的页数，每请求一次，页数 +1
		loading: false, // 上拉加载圈圈是否展示
		relatedIdList: [], // 存储已经关联过得商品的 id
		searchValue: '', // 输入的搜索关键字
	})

	const { loading } = toRefs(data)

	// 接收上个页面传来的值
	onLoad((event) => {
		// console.log("event",event);
		// 将携带过来的关联数组存起来，以便后续遍历
		data.relatedIdList = JSON.parse(event.related_id)
	})

	onMounted(() => {
		// 获取所有商品
		getGoods()
	})

	// 1、获取所有上架商品数据
	async function getGoods() {
		let db = await init()
		const res = await db.database().collection('goods').where({
			shelves: true // 上架的商品
		}).limit(10).field({
			goods_title: true,
			goods_cover: true,
			goods_price: true,
			video_url: true,
			seckill: true
		}).get()
		data.goodList = res.data
	}

	// 2、上拉加载
	onReachBottom(async () => {
		data.loading = true
		data.pageNum++
		let skip = data.pageNum * 10 // 跳过前面多少条开始获取
		let db = await init()
		const res = await db.database().collection('goods').where({
			shelves: true // 上架的商品
		}).skip(skip).limit(10).field({ // 使用skip，跳过对应的条数，输出剩下的
			// 选择要返回的数据			
			goods_title: true,
			goods_cover: true,
			goods_price: true,
			video_url: true,
			seckill: true

		}).get()
		data.goodList = [...data.goodList, ...res.data] //将上拉加载的数据和之前的组装
		data.loading = false
	})

	// 3、 选中关联商品
	function selectGood(goods_title, goods_id, goods_price, video_url, isRelated) {
		if (isRelated) {
			new FeedBack('该商品已被关联', 'error').toast()
		} else {
			// 将选中的商品信息赋值给公共传值 js 里面的 related_good
			related_good.value = {
				goods_title,
				goods_id,
				goods_price,
				video_url
			}
			uni.navigateBack({
				delta: 1 //返回上一界面
			})
		}
	}

	// 5、监听所有商品，如果关联的 id 和商品 id 相同，表示被关联
	watch(() => data.goodList, (newVal, oldVla) => {
		// 遍历商品表和被关联的商品 id 表
		for (let i = 0; i < data.relatedIdList.length; i++) {
			for (let j = 0; j < newVal.length; j++) {
				// 如果 id 相等 ，表名已经被关联过
				if (data.relatedIdList[i] == newVal[j]._id) {
					// 对该项商品新增一个属性用以表示
					data.goodList[j]['isRelated'] = true
				}
			}
		}
		// console.log("data.goodList",data.goodList);

	})

	// 6、搜索
	async function search() {
		let db = await init()
		const _ = db.database().command
		// 当用户搜索输入的不是全部空格的时候
		if (data.searchValue.split(" ").join("").length != 0) {
			// 点击开始搜索的时候，将pageNum改为 0,商品数组置空
			data.goodList = []
			data.pageNum = 0
			let query = _.or([  // or 表示或者
				{
					category: db.database().RegExp({ //构造正则表达式
						regexp: data.searchValue, 
						options: 'i', //大小写不敏感
					})
				},
				{
					goods_title: db.database().RegExp({
						regexp: data.searchValue,
						options: 'i',
					})
				}
			])
			
			let skip = data.pageNum * 10
			const res = await db.database().collection('goods').where(query).limit(10).skip(skip).get()
			data.goodList = [...data.goodList, ...res.data]
		}else{
			getGoods()
		}
	}
	
</script>

<style scoped>
	/* 搜索 */
	.search-position {
		margin: 10rpx 20rpx 0 20rpx;
		display: flex;
		align-items: center;
	}

	.search-position view:nth-child(2) {
		height: 70rpx;
		line-height: 70rpx;
		padding-left: 30rpx;
	}

	.search-input {
		display: flex;
		flex-direction: row;
		flex: 1;
		position: relative;
	}

	.search-input image {
		width: 35rpx;
		height: 35rpx;
		position: absolute;
		left: 20rpx;
		align-self: center;
	}

	.search-input input {
		background-color: #f4f4f4;
		width: 100%;
		height: 70rpx;
		padding: 0 20rpx 0 75rpx;
		border-radius: 8rpx;
	}

	/* 传递的结构样式 */
	.card-title {
		margin: 30rpx;
		color: #c7c7c7;
	}


	/* 关联商品 */
	.related-goods {
		display: flex;
		height: 200rpx;
		margin: 20rpx;
	}

	.related-goods image {
		width: 200rpx;
		height: 200rpx;
		display: block;
		border-radius: 10rpx;
	}

	.related-goods view:nth-child(2) {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-weight: bold;
		padding: 10rpx 0 10rpx 15rpx;
	}

	.related-goods view text:nth-child(2) {
		color: #1AAD19;
		font-size: 35rpx;
	}

	/* 控制文本最大行数为 2 行 */
	.line-clamp {
		-webkit-line-clamp: 2 !important;
	}
</style>
